<!-- eslint-disable vue/multi-word-component-names -->
<template>
    <div id="death"></div>
  </template>
  
  <script lang="ts" setup>
  import { onMounted } from "vue";
  import * as echarts from "echarts";
  
  onMounted(() => {
    var chartDom = document.getElementById('death');
var myChart = echarts.init(chartDom);
var option;

var colors = ['#00C0FA', '#FFEF68', '#00FFBA', '#92B2FF'];
var data = [22, 31, 23, 38];

var option = {
  grid: {
    top: '4%',
    left: '-6%',
    right: '8%',
    bottom: '8%',
    containLabel: true
  },
  xAxis: {
    show: false,
    type: 'value'
  },
  yAxis: {
    type: 'category',
    align: 'left',
    padding: [0, 0, 40, 10],
    axisLabel: {
      color: '#FFF',
      fontSize: 14,
      width: 80,
      padding: [0, 0, 50, 8],
      align: 'left',
      formatter: (params) => {
        return `${params}`;
      },
      rich: {
        value: {
          color: '#fff',
          fontSize: 12,
          fontWeight: 500
        }
      }
    },
    axisTick: 'none',
    inverse: true,
    axisLine: {
      show: false
    },
    data: ['第一周', '第二周', '第三周', '第四周']
  },
  series: [
    {
      type: 'pictorialBar',
      barWidth: 10,
      legendHoverLink: false,
      silent: true,
      symbolRepeat: true,
      symbolMargin: 2,
      symbol: 'rect',
      symbolClip: true,
      symbolSize: [3, 15],
      symbolPosition: 'start',
      label: {
        show: true,
        position: 'right',
        formatter: '{c}只',
        fontSize: 16,
        color: '#FFF'
      },
      itemStyle: {
        color: function (params) {
          return colors[params.dataIndex];
        }
      },
      data: data
    }
  ]
};

option && myChart.setOption(option);
    //监听窗口变化
    window.addEventListener("resize", function () {
      console.log("监听窗口变化");
      myChart.resize();
    });
  });
  </script>
  
  <style scoped>
  #death {
      width: 100%;
      height: 100%;
  }
  
  
  </style>